<template>
  <div>
  demo组件
  <br>
  <p id="pp" >{{msg}}</p>
  <button @click="msg='饶'">点我改</button>

  </div>
</template>

<script>
import { onBeforeUpdate } from 'vue';
export default {
  name: 'VueDemoApp',

  data() {
    return {
      msg:'你好饶思泳'
    };
  },


//初始化阶段
  beforeCreate(){
console.log('beforeCreate',this.msg);
  },
  created(){
    //发生请求在这里
    console.log('created',this.msg);
  },
  //dom渲染
  beforeMount(){
        const p=document.querySelector('#pp')
    console.log('beforeMout',p);
  },
    mounted() {
    const p=document.querySelector('#pp')
    console.log('mounted',p);
  },
//运行阶段
 beforeUpdate(){
      const p=document.querySelector('#pp')
      //数据变化后,更新dom
  console.log('beforeUpdate',p.innerHTML);
 },
 
 updated(){
    const p=document.querySelector('#pp')
         //数据变化后,更新dom
    console.log('updated',p.innerHTML);
 },
 beforeDestroy(){
    const p=document.querySelector('#pp')
    console.log('beforeDestroy');
 },
   methods: {
    //什么周期钩子函数会自动执行不要写在methods里
  },
  
};
</script>

<style lang="scss" scoped>

</style>